<!--
 * 快速命令组件
 *
 * @author Junpeng.Li
 * @date 2022-04-11 10:15
 *
 * 自定义事件：
 *   - 无
-->
<template>
    <div class="fast-cmd" :style="{
        height: `${height - 1}px`
    }">
        <div class="__title">
            <div class="__block">
                {{title}}
            </div>

            <div class="__block __tool">
                <el-select v-model="mode" placeholder="请选择"
                           style="width: 120px;">
                    <el-option
                            v-for="item in [{
                                value: SEND_MODE.SINGLE,
                                label: '当前会话'
                            }, {
                                value: SEND_MODE.ALL,
                                label: '全部会话'
                            }]"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>

            <div class="__block __tool">
                <el-button type="primary" @click="openAdd">创建</el-button>
            </div>
        </div>

        <div class="__cmds">
            <el-dropdown
                    v-for="item in cmds"
                    :key="item.id"
                    class="__cmd"
                    split-button
                    trigger="click"
                    @click="e => handleClick(e, item)"
                    @command="e => handleCommand(e, item)"
            >
                {{item.name}}
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="edit">编辑</el-dropdown-item>
                    <el-dropdown-item command="remove">删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <data-form ref="dataForm" @confirm="loadData"/>
    </div>
</template>

<script>

    import {findAll,removeCmd, getStting, setSetting} from "@/api/fast-cmd.api"
    import DataForm from './data-form'

    import {object2Array} from '@/utils/jtool'

    /**
     * 发送模式
     * @type {{ALL: string, SINGLE: string}}
     */
    const SEND_MODE = {
        // 当前会话
        SINGLE: 'single',

        // 全部会话
        ALL: 'all'
    }

    export default {
        name: "fastCmd",

        components: {
            DataForm
        },

        props: {

            /**
             * 会话终端列表
             */
            terminals: {
                type: Array,
                default: () => []
            },

            /**
             * 当前被激活的tab的索引
             */
            index: {
                type: Number,
                default: () => -1
            },

            /**
             * 标题
             */
            title: {
                type: String,
                default: () => '快速命令'
            }
        },

        data() {
            return {

                // 组件的高度, 单位: px
                height: 155,

                mode: SEND_MODE.SINGLE,

                SEND_MODE,

                // 命令列表
                cmds: []

            }
        },

        watch: {
            mode(val) {
                setSetting('mode', val)
            }
        },

        mounted() {
            this.loadData()
            this.mode = getStting().mode
        },

        methods: {

            /**
             * 获取组件的高度
             * @returns {number} 组件的高度, 单位: px
             */
            getHeight() {
                return this.height;
            },

            /**
             * 点击左侧按钮
             * @param e
             * @param item
             */
            handleClick(e, item) {
                if (this.mode === SEND_MODE.SINGLE) {
                    this.terminals[this.index].addText(item.command)
                } else {
                    this.terminals.forEach(terminal => {
                        terminal.addText(item.command)
                    })
                }
            },

            /**
             * 点击菜单项
             * @param command
             * @param item
             */
            handleCommand(command, item) {
                switch (command) {
                    case 'edit':
                        this.openEdit(item)
                        break;
                    case 'remove':
                        this.onRemove(item)
                        break;
                }
            },

            /**
             * 加载快速命令列表
             */
            loadData() {
                const cmds = findAll()
                this.cmds = object2Array(cmds)
            },

            /**
             * 打开创建对话框
             */
            openAdd() {
                this.$refs.dataForm.open()
            },

            /**
             * 打开修改对话框
             * @param data
             */
            openEdit(data) {
                this.$refs.dataForm.open(data)
            },

            /**
             * 删除一条快速命令
             * @param item
             */
            onRemove(item) {
                this.$confirm('该操作将删除此快速命令，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    removeCmd(item.id)
                    this.loadData()
                }).catch(() => {})
            }

        }
    }
</script>

<style scoped lang="scss">

    .fast-cmd {
        width: calc(100% - 20px);
        border-top: 1px solid #dcdfe6;
        padding: 0 10px;
        background-color: #eee;

        .__title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            color: #303133;

            .__block {
                float: left;
            }

            .__tool {
                font-size: 14px;
                margin-left: 20px;
            }
        }

        .__cmds {
            width: 100%;
            height: calc(100% - 50px);
            background-color: #fff;
            border-radius: 4px;
            overflow: auto;

            .__cmd {
                float: left;
                margin: 10px;
            }
        }
    }

</style>
